<template>
  <div class="home-container">
    <!-- 欢迎区域 -->
    <section class="hero-section">
      <div class="hero-content">
        <h1 class="hero-title">
          <span class="gradient-text">文档转换器</span>
        </h1>
        <p class="hero-subtitle">
          专业的文档格式转换工具，支持 Word、Markdown、PDF 之间的相互转换
        </p>
        <div class="hero-actions">
          <button class="btn btn-primary" click.trigger="navigateToConverter()">
            <span class="btn-icon">🚀</span>
            开始转换
          </button>
          <button class="btn btn-secondary" click.trigger="navigateToBatch()">
            <span class="btn-icon">📚</span>
            批量转换
          </button>
        </div>
      </div>
    </section>

    <!-- 统计数据 -->
    <section class="stats-section">
      <div class="stats-grid">
        <div repeat.for="stat of stats" class="stat-card">
          <div class="stat-icon">${stat.icon}</div>
          <div class="stat-value">${stat.value}</div>
          <div class="stat-label">${stat.label}</div>
        </div>
      </div>
    </section>

    <!-- 功能特性 -->
    <section class="features-section">
      <div class="section-header">
        <h2 class="section-title">核心功能</h2>
        <p class="section-subtitle">强大的文档转换能力，满足您的各种需求</p>
      </div>
      <div class="features-grid">
        <div repeat.for="feature of features" class="feature-card">
          <div class="feature-icon" style.bind="'color: ' + feature.color">
            ${feature.icon}
          </div>
          <h3 class="feature-title">${feature.title}</h3>
          <p class="feature-description">${feature.description}</p>
        </div>
      </div>
    </section>

    <!-- 转换流程 -->
    <section class="process-section">
      <div class="section-header">
        <h2 class="section-title">转换流程</h2>
        <p class="section-subtitle">简单三步，轻松完成文档转换</p>
      </div>
      <div class="process-steps">
        <div class="step">
          <div class="step-number">1</div>
          <div class="step-content">
            <h3 class="step-title">选择文件</h3>
            <p class="step-description">上传您需要转换的文档文件</p>
          </div>
        </div>
        <div class="step-arrow">→</div>
        <div class="step">
          <div class="step-number">2</div>
          <div class="step-content">
            <h3 class="step-title">选择格式</h3>
            <p class="step-description">选择目标转换格式和选项</p>
          </div>
        </div>
        <div class="step-arrow">→</div>
        <div class="step">
          <div class="step-number">3</div>
          <div class="step-content">
            <h3 class="step-title">下载结果</h3>
            <p class="step-description">转换完成后下载转换结果</p>
          </div>
        </div>
      </div>
    </section>
  </div>
</template> 